import React ,{ lazy, Suspense }from 'react';

import Main from '../pages/Main/main';
// const  Main = lazy(()=> import('../pages/Main/main')) 
const  My = lazy(()=>import('../pages/My/my')) 
const  Cart  = lazy(()=>import('../pages/Cart/cart')) 
const  More  = lazy(()=>import('../pages/More/more')) 
const Detail = lazy(()=>import('../pages/Detail/detail'))
import { Redirect} from 'react-router-dom';
import TableBar from '../components/tabbleBar/TabbleBar'
import BlankLayout from '../layouts/BlankLayout'

const SuspenseComponent = Component => props => {
    return (
        <Suspense fallback={null}>
            <Component {...props}></Component>
        </Suspense>
    )
}

export default [{
    component: BlankLayout,
    routes:[
        {
            path:'/',
            exact: true,
            render: () => <Redirect to = { "/home" }/>,
        },
        {
            path:'/home',
            component: TableBar,
            routes: [
                {
                    path: '/home',
                    exact: true,
                    render: () => <Redirect to = { "/home/main" }
                    />,
                },
                {
                    path: '/home/main',
                    component: SuspenseComponent(Main),
                },
                {
                    path: '/home/cart',
                    component: SuspenseComponent(Cart),
                },
                {
                    path: '/home/more',
                    component: SuspenseComponent(More),
                },
                {
                    path: '/home/my',
                    component: SuspenseComponent(My),
                }
            ]
        },
        {
            path: '/detail',
            component: SuspenseComponent(Detail),
            routes: [
                {
                    path: '/detail:id',
                    component: SuspenseComponent(Detail)
                }
            ]
        }
    ]
}]
